<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model="uname"/>
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="age"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>
      <button @click="addArr">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in tds" :key=item.name>
          <td>{{index+1}}</td>
          <td>{{item.uname}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click="delArr(item.id)">删除</button>
            <button @click="setArr(item.uname,item.age,item.gender,index)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {
          tds:[{
              id:1,
              uname:'Tom',
              age:20,
              gender:'男',
          },
          {
              id:2,
              uname:'jone',
              age:18,
              gender:'女',
          },
          ],

          id:'',
          uname : '',
          age : '',
          gender :''
      }
    },
    methods:{
      addArr(){


        if(this.id===''){
            if(this.uname && this.age && this.gender){
            const newArr = {
            id:this.tds.length+1,
            uname:this.uname,
            age:this.age,
            gender:this.gender,
        }
        this.tds=[...this.tds,newArr]
        
        }
        else{
            alert('请输入参数')
        }
        }
        else{
          this.tds.forEach(item=>{
            if(item.id===this.id+1){
               item.uname=this.uname
               item.age=this.age
               item.gender=this.gender
              }
           })
        }      
      },
      delArr(index){
          this.tds = this.tds.filter(item=> item.id!==index)
          console.log(index);
      },
      setArr(user,age,gender,id){
          this.uname = user
          this.age = age
          this.gender = gender
          this.id = id
          console.log(this.uname);
          console.log(this.age);
          console.log(this.gender);
          console.log(this.id);
      }
    },
  }

  

</script>